<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        /* 
            事件委托的原理就是基于事件冒泡的机制。
            需求：点击指定的li的时候，就把该li的背景色设置为绿色。
        */
        // 正常的思路是为每一个li标签都添加监听器并添加对应的操作
        // 在这里相当于把这个操作委托给父元素ul，为点击的目标添加上效果
        const ulObj = document.querySelector("ul");
        ulObj.addEventListener("click", function (e) {
            console.log(e.target);
            e.target.style.backgroundColor = "green";
        })    
    </script>
</body>

</html>